<script>

import TaBar from "./Tabar.vue";
import Navbar from "./Navbar.vue";
import Center from "./Center.vue";
import List from "./List.vue";
import Home from "./Home.vue";
import store from "./store.js";

const obj = {
  "首页": "Home",
  "列表": "List",
  "我的": "Center",
};
export default {
  components: {
    TaBar, Navbar,
    Home ,
    List,
    Center ,
  },

  data() {
    return {
      which: "Home"
    }
  }
  , mounted() {
    store.subscribe((value) => {
      this.which = obj[value]
    })
  }
}
</script>

<template>
  <div>
    <navbar/>
    <!--   让组件保持活着，意味着切换组件在切换到原来的数据还在，比如输入数据 include exclude 支持正则，动态绑定  -->
    <keep-alive :include="['home','list']">
      <component :is="which"></component>
    </keep-alive>
    <ta-bar/>
  </div>
</template>

<style scoped>

</style>